<!--
 * @Description: 设备详情
 * @Author: lwx
 * @Date: 2022-12-13 10:46:56
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-25 14:22:42
-->
<template>
  <div class="fillcontain d-flex">
     <div class="container-left">
       <div class="left-top d-flex">
          <!-- 设备信息 -->
          <div class="top-1 panel">
            <h2 class="panel-title">设备信息</h2>
            <device-info :info="deviceInfo"/>
          </div>
          <!-- 设备效率 -->
          <div class="top-2 panel">
             <h2 class="panel-title">设备效率</h2>
             <div class="d-flex">
               <efficiency-chart id="activation" :pdata="activation"/>
               <efficiency-chart id="OEE" :pdata="oee" />
             </div>
          </div>
       </div>
       <!-- 设备参数 -->
       <div class="right-bottom panel">
         <h2 class="panel-title">设备参数</h2>
            <params-table :paramsTable="paramsTable"/>
       </div>
     </div>
     <div class="container-right">
      <!-- 维修记录 -->
       <div class="right-top panel">
         <h2 class="panel-title">维修记录</h2>
         <a class="more" @click="seeMore">查看更多></a>
          <maintain-record :maintainList="maintainList"/>
       </div>
       <!-- 保养记录 -->
       <div class="right-bottom panel">
          <h2 class="panel-title">保养记录</h2>
          <el-table
            size="mini"
            border
            :data="serviceList"
            style="width: 100%;"
            height="340px"
            align="center">
            <el-table-column
              prop="user_name"
              label="保养人"
              align="center">
            </el-table-column>
            <el-table-column
              prop="time"
              label="保养时间"
              align="center">
            </el-table-column>
          </el-table>
       </div>
     </div>
  </div>
</template>

<script>
import DeviceInfo from './childComps/DeviceInfo.vue'
import efficiencyChart from '@/components/echart/efficiencyChart'
import MaintainRecord from './childComps/MaintainRecord.vue'
import paramsTable from './childComps/ParamsTable.vue'
import DataChart from '../report/childComps/DataChart.vue'
import {deviceData} from '@/api/device.js'
export default {
  components:{
    DeviceInfo,
    efficiencyChart,
    MaintainRecord,
    paramsTable,
    DataChart
  },
  data () {
    return {
      facility_id:'',
      machine_kind:'',
      machine_no:'',
      deviceInfo:{},
      activation:{name:'CT',percent:0,},
      oee:{name:'OEE率',percent:0,},
      maintainList:[],
      serviceList:[],
      paramsTable:[]
    }
  },
  created(){
    if(this.$route.query.row){
        const row =JSON.parse(this.$route.query.row)
        this.facility_id=row.facility_id
        this.machine_kind=row.machine_kind
        this.machine_no=row.machine_no
        this.getDeviceData()//获取设备数据
    }
   },
 methods:{
      //获取设备数据
    async getDeviceData(){
     const res= await deviceData(this.facility_id)
      this.deviceInfo=res.data.machine //设备信息
      this.maintainList=res.wei_xiu//维修数据
      this.serviceList=res.bao_yang//保养数据
      this.activation.percent=res.ct//ct
      this.oee.percent=res.oee//oee
      let parameter =res.data.parameter
      if(parameter){
        let arr=[]
        for (const i in parameter) {
        let obj={}
        obj.name=i
        if(parameter[i]===true){
          parameter[i]='是'
        }
        if(parameter[i]===false){
          parameter[i]='否'
        }
        obj.value=parameter[i]
         arr.push(obj)
       } 
       this.paramsTable=arr
      }     
     }, 
     //查看更多
    seeMore(){
      this.$router.push({path:'/dev/repairRecord',query:{machine_no:this.machine_no}})
    }
 }
}
</script>
<style lang='scss' scoped>
.container-left{
    flex:2.3;
    margin-right: 13px
}
.container-right{
    flex: 1;
}
.left-top,.right-top{
    height: 215px;
    margin-bottom:13px;
    .top-1{
        flex: 1;
        margin-right: 13px
     }
     .top-2{
        flex: 1.1;
     }
    }
.left-bottom,.right-bottom{
    height:405px
 }
 .panel{
    background-color: #fff;
    padding: 0 20px 5px
 }
.panel-title{
  font-size: 17px;
  font-weight: 600;
  color: #6acca3;
  padding: 0;
  margin: 0;
  height:45px;
  line-height:45px;
}
.more{
   position: absolute;
   right:37px;
   top: 37px;
   font-size: 12px;
   color: #409EFF;
}
</style>